<template>
	<view class="toast-comp-filter">
		<view class="toast-comp">
			<view class="toast-content">
				<image v-if="toastInfo.closeShow" src="@/static/images/projectDetail/close.png" mode="widthFix" class="toast-close-icon-img" @click="closeToast"></image>
				<view class="toast-icon">
					<image v-if="toastInfo.type === 'success'" src="@/static/images/projectDetail/success.png" mode="widthFix" class="toast-icon-img"></image>
					<image v-if="toastInfo.type === 'error'" src="@/static/images/projectDetail/error.png" mode="widthFix" class="toast-icon-img"></image>
				</view>
				<view class="toast-info">
					<view class="toast-title">
						{{toastInfo.title}}
					</view>
					<view v-if="toastInfo.subTitle" class="toast-sub-title">
						{{toastInfo.subTitle}}
					</view>
				</view>
			</view>
			<view class="toast-btns" v-if="toastInfo.cancel || toastInfo.confirm">
				<button v-if="toastInfo.cancel" class="toast-btn-cancel" @click="cancel">取消</button>
				<button v-if="toastInfo.confirm" class="toast-btn-confirm" @click="confirm">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			toastInfo: {
				type: Object,
				default: () => {
					return {
						visible: false,
						type: 'success',
						title: '',
						subTitle: '',
						cancel: false,
						confirm: false,
						closeShow: true
					}
				}
			}
		},
		methods:{
			// 叉号关闭
			closeToast(){
				this.$emit('closeToast')
			},
			// 确认
			confirm(){
				this.$emit('closeToast')
			},
			// 取消
			cancel(){
				this.$emit('closeToast')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toast-comp-filter{
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		.toast-comp{
			width: 280px;
			// min-height: 84px;
			background: #FFFFFF;
			box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			border: 1px solid #E5E8ED;
			position: absolute;
			right: 40px;
			top: 108px;
			.toast-content{
				display: flex;
				padding: 20px;
				box-sizing: border-box;
				position: relative;
				.toast-close-icon-img{
					width: 12px;
					height: 12px;
					position: absolute;
					right: 10px;
					top: 10px;
				}
				.toast-icon{
					.toast-icon-img{
						width: 16px;
						height: 16px;
					}
				}
				.toast-info{
					padding-left: 8px;
					box-sizing: border-box;
					flex: 1;
					.toast-title{
						font-size: 14px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1F1F1F;
					}
					.toast-sub-title{
						font-size: 12px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #838993;
						margin-top: 8px;
						line-height: 20px;
					}
				}
			}
			
			
			.toast-btns{
				text-align: right;
				padding:0 20px 20px 20px;
				box-sizing: border-box;
				.toast-btn-cancel{
					width: 40px;
					height: 24px;
					line-height: 24px;
					background: #ECEFF2;
					border-radius: 2px;
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #838993;
					display: inline-block;
					padding:0;
				}
				.toast-btn-confirm{
					width: 40px;
					height: 24px;
					line-height: 24px;
					background: #26bbff;
					border-radius: 2px;
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 8px;
					padding:0;
					display: inline-block;
				}
			}
		}
	
	}
	@media screen and (min-width: 0px) and (max-width:1024px){
		.toast-comp-filter{
			display: flex;
			align-items: center;
			justify-content: center;
			.toast-comp{
				position: static;
				
			}
		}
	}
</style>